<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>为极科技 - 全国领先的手机主题服务商，专业的主题定制平台</title>
    <!--    <meta name="renderer" content="webkit">-->
    <meta name="keywords" content="为极 ，为极科技官方网站 ，手机主题制作 ,企业推广，游戏推广，主题定制，安全鱼，设计师，招聘，主题">
    <meta name="description"
          content="为极科技专注于魅族，小米，华为，乐视，oppo，vivo，三星，联想，金立，努比亚，360平台主题设计，推出游戏上线推广，企业文化推广，影视上线推广等主题优定制，并且持续招聘主题设计师">
    <!--    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1″> -->
    <meta name="application-name" content="pc"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta name="description" content="">
    <meta name="viewport" content="width=1280,user-scalable=yes,minimal-ui">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="/images/index/logo.ico">
    <link rel="stylesheet" href="stylesheets/common.css">
    <link rel="stylesheet" href="stylesheets/project.css">

</head>
<body>
<div class="all">
    <!--头部-->
    <c:import url="/header.jsp"></c:import>
    <!--轮播图-->
    <section class="car-pic">
        <c:forEach var="data" varStatus="setp" items="${dataMap}">
            <c:if test="${setp.first}">
                <img src="/image?type=0&image=${data.bimage}" class="project_banner">
                <img src="/image?type=0&image=${data.image}" alt="text" class="project_text">
            </c:if>
        </c:forEach>
    </section>
    <!--project-->
    <section class="content">
        <div class="content-list">
            <ul>
                <li class="list_active mar_0" data-cid="0"><a href="javascript:;">全部分类</a></li>
                <c:forEach var="data" varStatus="setp" items="${dataClass}">
                    <li data-cid="${data.id}"><a href="javascript:;"> ${data.name} </a></li>
                </c:forEach>
            </ul>
        </div>
        <div class="content_all">
            <div class="content-div">
                <c:forEach var="data" varStatus="setp" items="${dataTheme}">
                    <div
                            <c:if test="${setp.first}">class="mar_top_0 mar_0"</c:if>
                            <c:if test="${setp.index==1}">class="mar_top_0"</c:if>
                            <c:if test="${setp.index % 2==0}">class="mar_0"</c:if>

                            style="opacity: 1;">
                        <a href="/themeScreenshot/user/lists?tid=${data.id}&bimage=${data.bimage} " target="_blank"
                           style="outline: none;">
                            <div class="div_style"><img src="/themeAdmin/user/image?tid=${data.id}&image=${data.image}"
                                                        alt=""></div>
                            <h2>${data.title}</h2>
                            <p>${data.content}</p></a>
                    </div>

                </c:forEach>


            </div>
            <div class="content_page">

            </div>
        </div>


    </section>

    <c:import url="/footer.jsp"></c:import>
    <!--备案-->


</div>
<div class="top">
    <!--<img src="images/index/top.png" alt="回到顶部箭头">-->
</div>


<script src="/bootstrap-3.3.7-dist/js/jquery-3.2.1.min.js"></script>
<script src="/javascripts/clipboard.min.js"></script>
<script src="/javascripts/common.js"></script>
<%--<script src="/javascripts/project.js"></script>--%>
<script>

    var _index = 0;

    $(document).ready(function () {
//        $('.head-right li').click(function () {
//            $('.head-right li').removeClass('active');
//            $(this).addClass('active');
//        });
        $('.head-right li').removeClass('active');
        $('.head-right li').eq(1).addClass('active');

        $('.content-list li').each(function (index, elem) {

            $(elem).click(function () {
                $('.content-list li').find('a').css('color', '#5b5b5b');
                $(this).find('a').css('color', '#0093e9');
                var cid = $(this).attr('data-cid');
                $(".content-div>div").css("opacity", "0");
                $(".content-div>div").animate({"opacity": "1"}, 1000);
                var start = 0;
                var end = 10;
                $.post('/themeCase', {cid: cid, start: start, end: end}, function (data) {
                    $(".content-div").empty();
//                    console.log(data.length);
                    if(data.length>0){
                        $.each(data, function (n, value) {
                            if (n == 0 || n == 1) {
                                $(".content-div").append("<div class='mar_top_0'><a href='/themeScreenshot/user/lists?tid=" + value.id + "&bimage=" + value.bimage + "' target='_blank' style='outline: none'><div class='div_style'> <img src='/themeAdmin/user/image?tid=" + value.id + "&image=" + value.image + "&bimage=" + value.bimage + "' alt=''> </div> <h2>" + value.title + "</h2> <P>" + value.content + "</P> </a></div>");
                            } else {
                                $(".content-div").append("<div class=''><a href='/themeScreenshot/user/lists?tid=" + value.id + "&bimage=" + value.bimage + "' target='_blank' style='outline: none'><div class='div_style'> <img alt='' src='/themeAdmin/user/image?tid=" + value.id + "&image=" + value.image + "&bimage=" + value.bimage + "'> </div> <h2>" + value.title + "</h2> <P>" + value.content + "</P> </a></div>");
                            }

                            if (n % 2 == 0) {
                                $(".content-div>div").eq(n).addClass("mar_0");
                            }
                        });
                    }else{
                        $(".content-div").append('<div class="mar_top_0 mar_0" style="opacity: 1;"><div class="div_style"> <img src="/images/waiting.png" alt=""> </div> <h2>For 团队</h2> <p>定制待开放。。。。。。。。。</p> </div>');

                    }

//                   $("#project").append(tbody);
                });
            });
        });
        var data_cid = '0';
        download_page(data_cid);

        $('.content-list li').click(function () {
            data_cid = $(this).attr('data-cid');
            download_page(data_cid);
        });
//        下滑加载
        var top;

    });


    function download_page(cid) {
//        if(cid!=='0'){
            $('.content_page').empty();
            $('.content_page').append(' <section class="page">\n' +
                '                <div class="page_content">\n' +
                '                    <img src="images/page_left.png" alt="翻页左边" class="fl_left page_left">\n' +
                '                    <ul class="page_dots">\n' +
                '\n' +
                '                    </ul>\n' +
                '                    <img src="images/page_right.png" alt="翻页右边" class="fl_left page_right">\n' +
                '                </div>\n' +
                '            </section>');

            right_left(cid);
            left_right(cid);
            $('.page_right').unbind('hover').hover(function () {
                $(this).attr('src','images/page_right_hover.png');
            },function () {
                $(this).attr('src','images/page_right.png');
            });
            $('.page_left').unbind('hover').hover(function () {
                $(this).attr('src','images/page_left_hover.png');
            },function () {
                $(this).attr('src','images/page_left.png');
            });

            $.post('/claxxNum',{cid:cid},function (data) {
                if(data.code==200 && Math.ceil(data.msg/10)>1){
                    for(var i=1;i<=Math.ceil(data.msg/10);i++){
                        $(".page .page_dots").append("<li><a href='javascript:;'>"+i+"</a></li>");
                        $('.page_dots>li').eq(0).css("margin-left","20px");
                        $(".page_dots>li").eq(Math.ceil(data.msg/10)-1).css("margin-right","20px");
                    }
                        $(".page_dots>li").find("a").eq(_index).css("color","#0093e9");
                        page_click(cid);

                }else{
                        $('.content_page').empty();
                }
            });
//        }else{
//            $('.content_page').empty();
//        }

    }

//    分页点击事件 i 为页码下标
    function page_click(cid) {

        $(".page_dots>li").each(function (index,elem) {
            $(elem).unbind().click(function () {
                _index  = $(this).index();
                var start = $(this).index()*10;
                var end = start + 10;
                $(".page_dots>li").find('a').css("color","#aeaeae");
                $(this).find('a').css('color','#0093e9');
                $(".content-div").empty();
                $.post('/themeCase', {cid: cid, start: start, end: end}, function (data) {
                    if (data !== null) {
//                            $(".content-div>div").css("opacity", "0");
//                            $(".content-div>div").animate({"opacity": "1"}, 1000);
                        $.each(data, function (n, value) {
                            $(".content-div").append("<div class=''><a href='/themeScreenshot/user/lists?tid=" + value.id + "&bimage=" + value.bimage + "' target='_blank' style='outline: none'><div class='div_style'> <img alt='' src='/themeAdmin/user/image?tid=" + value.id + "&image=" + value.image + "&bimage=" + value.bimage + "'> </div> <h2>" + value.title + "</h2> <P>" + value.content + "</P> </a></div>");
                            if (n % 2 == 0) {
                                $(".content-div>div").eq(n).addClass("mar_0");
                            }
                        });
                        $("html,body").animate({scrollTop:($('.content_all').offset().top)-100},500);
                    }
                });
            });
        });
    }
//    var index = 0;
//    页码左右点击滑动 index为当前显示的页码数
    function right_left(cid) {
        $('.page_right').unbind('click').click(function () {
            _index = _index + 1;
            if(_index<=$(".page_dots>li").length-1){
                $(".page_dots>li").find('a').css("color","#aeaeae");
                $(".page_dots>li").find('a').eq(_index).css('color','#0093e9');
                var start =_index*10;
                var end = start + 10;
                $(".content-div").empty();
                $.post('/themeCase', {cid: cid, start: start, end: end}, function (data) {
                    if (data !== null) {
                        $.each(data, function (n, value) {
                            $(".content-div").append("<div class=''><a href='/themeScreenshot/user/lists?tid=" + value.id + "&bimage=" + value.bimage + "' target='_blank' style='outline: none'><div class='div_style'> <img alt='' src='/themeAdmin/user/image?tid=" + value.id + "&image=" + value.image + "&bimage=" + value.bimage + "'> </div> <h2>" + value.title + "</h2> <P>" + value.content + "</P> </a></div>");
                            if (n % 2 == 0) {
                                $(".content-div>div").eq(n).addClass("mar_0");
                            }
                        });
                        $("html,body").animate({scrollTop:($('.content_all').offset().top)-100},500);
                    }
                });
            }else{
                _index = $(".page_dots>li").length-1;
            }

        });
    }
    function left_right(cid) {
        $('.page_left').unbind('click').click(function () {
            _index = _index - 1;
            if(_index>=0){
                $(".page_dots>li").find('a').css("color","#aeaeae");
                $(".page_dots>li").find('a').eq(_index).css('color','#0093e9');
                var start =_index*10;
                var end = start + 10;
                $(".content-div").empty();
                $.post('/themeCase', {cid: cid, start: start, end: end}, function (data) {
                    if (data !== null) {
                        $.each(data, function (n, value) {
                            $(".content-div").append("<div class=''><a href='/themeScreenshot/user/lists?tid=" + value.id + "&bimage=" + value.bimage + "' target='_blank' style='outline: none'><div class='div_style'> <img alt='' src='/themeAdmin/user/image?tid=" + value.id + "&image=" + value.image + "&bimage=" + value.bimage + "'> </div> <h2>" + value.title + "</h2> <P>" + value.content + "</P> </a></div>");
                            if (n % 2 == 0) {
                                $(".content-div>div").eq(n).addClass("mar_0");
                            }
                        });
                        $("html,body").animate({scrollTop:($('.content_all').offset().top)-100},500);
                    }
                });
            }else{
                _index = 0;
            }

        });
    }




</script>
</body>
</html>